import React from 'react';
import { Button, Tabs, Space, Empty, Typography } from 'antd';
import {
  MergeCellsOutlined,
  BarChartOutlined,
  SettingOutlined,
  CloseOutlined,
  MenuFoldOutlined,
  FileTextOutlined,
} from '@ant-design/icons';
import VisualizationPanel from '../visualization/VisualizationPanel';
import InputParametersPanel from './InputParametersPanel';

const { Title, Paragraph } = Typography;

interface ToolbarMenuItem {
  key: string;
  icon: React.ReactNode;
  label: string;
  description: string;
}

interface ExperimentToolbarProps {
  visible: boolean;
  width: number;
  activeTool: string | null;
  isResizing: boolean;
  toolbarRef: React.RefObject<HTMLDivElement>;
  resizeRef: React.RefObject<HTMLDivElement>;
  onToolSelect: (tool: string) => void;
  onClose: () => void;
  onResizeStart: (e: React.MouseEvent) => void;
  onResizeEnter: (e: React.MouseEvent) => void;
  onResizeLeave: (e: React.MouseEvent) => void;
  projectNameEn?: string;
  experiment?: any;
}

const ExperimentToolbar: React.FC<ExperimentToolbarProps> = ({
  visible,
  width,
  activeTool,
  isResizing,
  toolbarRef,
  resizeRef,
  onToolSelect,
  onClose,
  onResizeStart,
  onResizeEnter,
  onResizeLeave,
  projectNameEn,
  experiment,
}) => {
  if (!visible) {
    return null;
  }

  // 工具栏菜单项 - 输入参数放在第一个，数据可视化放在第二个
  const toolbarMenuItems: ToolbarMenuItem[] = [
    {
      key: 'parameters',
      icon: <FileTextOutlined />,
      label: '输入参数',
      description: '查看本次实验的输入参数'
    },
    {
      key: 'visualization',
      icon: <BarChartOutlined />,
      label: '数据可视化',
      description: '对选择的实验结果进行数据可视化'
    },
    {
      key: 'merge',
      icon: <MergeCellsOutlined />,
      label: '结果合并',
      description: '选择多个实验的结果进行合并'
    }
  ];

  // 渲染工具栏面板内容
  const renderToolbarContent = () => {
    if (!activeTool) {
      return (
        <div style={{ padding: '20px', textAlign: 'center' }}>
          <Empty description="请从左侧菜单选择一个功能" />
        </div>
      );
    }

    switch (activeTool) {
      case 'parameters':
        return (
          projectNameEn ? (
            <InputParametersPanel projectNameEn={projectNameEn} experiment={experiment} />
          ) : (
            <div style={{ padding: '20px', textAlign: 'center' }}>
              <Empty description="无法加载输入参数：缺少项目信息" />
            </div>
          )
        );
      case 'merge':
        return (
          <div style={{ padding: '16px' }}>
            <Title level={4}>结果合并</Title>
            <Paragraph type="secondary" style={{ marginBottom: 16 }}>
              选择多个实验的结果进行合并操作
            </Paragraph>
            <Empty description="功能开发中..." />
          </div>
        );
      case 'visualization':
        return <VisualizationPanel />;
      default:
        return (
          <div style={{ padding: '20px', textAlign: 'center' }}>
            <Empty description="未知功能" />
          </div>
        );
    }
  };

  return (
    <>
      <div
        ref={toolbarRef}
        style={{
          position: 'fixed',
          right: 0,
          top: 0,
          bottom: 0,
          width: `${width}px`,
          background: '#fff',
          borderLeft: '1px solid #f0f0f0',
          boxShadow: '-2px 0 8px rgba(0,0,0,0.1)',
          display: 'flex',
          flexDirection: 'column',
          zIndex: 999,
          transition: isResizing ? 'none' : 'width 0.2s ease'
        }}
      >
        {/* 面板头部 - 横向Tab */}
        <div
          style={{
            borderBottom: '1px solid #f0f0f0',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            background: '#fff',
            position: 'relative'
          }}
          className="toolbar-tabs-container"
        >
          <style>{`
            .toolbar-tabs-container .ant-tabs-nav {
              margin-bottom: 0 !important;
            }
          `}</style>
          <Tabs
            activeKey={activeTool || undefined}
            onChange={onToolSelect}
            type="card"
            size="small"
            style={{ flex: 1 }}
            items={toolbarMenuItems.map(item => ({
              key: item.key,
              label: (
                <Space>
                  {item.icon}
                  <span>{item.label}</span>
                </Space>
              )
            }))}
          />
          <Button
            type="text"
            icon={<MenuFoldOutlined />}
            size="small"
            onClick={onClose}
            style={{
              position: 'absolute',
              right: '8px',
              top: '8px',
              zIndex: 10
            }}
          />
        </div>

        {/* 工具栏内容区域 */}
        <div
          style={{
            flex: 1,
            overflow: 'auto',
            position: 'relative'
          }}
        >
          {renderToolbarContent()}
        </div>

        {/* 拖拽调整大小的手柄 */}
        <div
          ref={resizeRef}
          onMouseDown={onResizeStart}
          onMouseEnter={onResizeEnter}
          onMouseLeave={onResizeLeave}
          style={{
            position: 'absolute',
            left: 0,
            top: 0,
            bottom: 0,
            width: '4px',
            cursor: 'col-resize',
            background: 'transparent',
            zIndex: 1000,
            userSelect: 'none',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center'
          }}
        >
          <div
            style={{
              width: '2px',
              height: '40px',
              background: isResizing ? '#1890ff' : '#d9d9d9',
              borderRadius: '1px',
              transition: isResizing ? 'none' : 'background 0.2s'
            }}
          />
        </div>
      </div>

      {/* 拖拽时的遮罩层 */}
      {isResizing && (
        <div
          style={{
            position: 'fixed',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            zIndex: 998,
            cursor: 'col-resize',
            userSelect: 'none'
          }}
        />
      )}
    </>
  );
};

export default ExperimentToolbar;

